<template>
    <Header title="编辑出行人" :back="true" />
    <div class="bg">
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field required v-model="list.name" name="name" label="姓名" placeholder="请输入姓名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field required v-model=fieldValue readonly name="cardType" label="证件类型" placeholder="点击证件类型"
                    @click="showPicker = false" />
                <van-popup required v-model:show="showPicker" position="bottom">
                    <van-picker :columns="documenttypelist" @confirm="onConfirm" @cancel="showPicker = false"
                        :columns-field-names="customFieldName" />
                </van-popup>

                <van-field required v-model="list.idCard" name="idCard" label="证件号码" placeholder="请输入证件号码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <van-field  v-model="list.linkPhone" name="linkPhone" label="手机号" placeholder="请输入手机号"
                    />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    保存
                </van-button>
            </div>
        </van-form>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from "vue-router"
import Header from '@/components/header/Header.vue'
import api from '@/api/index.js'
import { isValidPhoneNumber, maskIdNumber } from '@/utils/index'
import { showToast } from 'vant';
const router = useRouter()
const route = useRoute()
let id = route?.query?.id

console.log( route .query);
const list = ref([]);
const documenttypelist = ref([])
const fieldValue = ref('身份证')
const cardTypelist = ref('')
const showPicker = ref(false);
const customFieldName = {
    text: 'itemName',
    value: 'itemCode',
};

const onConfirm = ({ selectedOptions }) => {
    console.log(selectedOptions);
    showPicker.value = false;
    fieldValue.value = selectedOptions[0].itemName;
    cardTypelist.value = selectedOptions[0].itemCode;
};

const onSubmit = (values) => {

    const data = list.value
    const resultphone = isValidPhoneNumber(data.linkPhone);
    const maskIdNumberidCard = maskIdNumber(data.idCard)
    console.log(maskIdNumberidCard); // 输出函数返回的值
    values.cardType = "identityCard";
    console.log(values);
    if (maskIdNumberidCard == "无效的身份证号码") {
        showToast("无效的身份证号码")
    } else {
        api.editapedestrian(data).then((res) => {
            if (route.query.dateS) {
                router.push({
                    path: '/scenicordel', query: route.query
                })
            } else {
                router.push({ path: '/pedestrianmanagement' })

            }
            console.log('更新', res)
        }).finally(() => {

        })
    }



};
// 更具id获取出行人信息
function geilist() {
    const params = {
        id: id
    }
    api.getidapedestrian(params).then((res) => {
        list.value = res.data
        console.log('出行人详细', res)
    }).finally(() => {
    })
}
geilist()
// 获取证件类型
function getype() {
    api.gettypeCode().then((res) => {
        documenttypelist.value = res.data
    }).finally(() => {

    })
}
getype()
</script>
<style lang="scss" scoped>
.detail {
    height: 100vh;
    line-height: 100vh;
    text-align: center;
}

.bg {

    background: #F9F8F3;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    height: 100vh;
    //  border: 1px solid red;
}

.van-form {
    // margin-top: 15px;
    padding-top: 1.5rem;
    width: 100vh;
}
</style>
